<template>
  <div class="tourist">
    <div class="top">
      <div class="title">
        <div>实时游客统计</div>
        <img src="@/views/screen/images/dataScreen-title.png" alt="">
      </div>
      <div class="pText">
        <p>当前游客数量<span>99999</span>人</p>
      </div>
    </div>
    <div class="number">
      <div v-for="item in numbers" :key="item" class="numberitem">
        {{ item }}
      </div>
    </div>
    <div class="charts" ref="chart">
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill'
const numbers = ref('297386人')
const chart = ref()
onMounted(() => {
  const myChart = echarts.init(chart.value)
  let option = {
    series: [{
      type: 'liquidFill',
      radius: `80%`,
      animationDuration: 0,
      animationDurationUpdate: 0,
      data: [0.5, 0.4, 0.3],
      color: ['#00FF00', '#00CD00', '#00CD66'],
      label: {
        fontSize: 40,
        color: "#fff",
      },
      backgroundStyle: {
        borderWidth: 1, //边框宽度
        borderColor: "#0080FF", //边框颜色
        color: "#98F5FF", //背景色
      },
    }],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
})
</script>

<style lang="scss" scoped>
.tourist {
  width: 100%;
  height: 400px;
  background: url(@/views/screen/images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  .top {
    .title {
      height: 60px;
      color: white;
      font-size: 24px;
      margin-left: 10px;
    }
    .pText {
      color: white;
      width: 100%;
      font-size: 20px;
      text-align: right;
      span {
        color: red;
      }
    }
  }
  .number {
    display: flex;
    text-align: center;
    padding: 5px 10px;
    // background-color: blue;
    .numberitem {
      flex: 1;
      height: 60px;
      line-height: 60px;
      font-size: 28px;
      font-weight: 900;
      color: #29fcff;
      background: url(@/views/screen/images/total.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .charts {
    width: 100%;
    height: 270px;
  }
}
</style>
